<template>
  <div>
    <div class="movie-info-container">
      <img class="movie-img" src="../../images/e824b899a9014c086e067b57952815087bf40bd15ebf.png" alt="">
      <div class="movie-info-box" v-for="(item,index) in list" :key="index">
        <div class="text title">这个杀手不太冷静</div>
        <div class="img-container">
          <img src="../../images/打分.png" alt="">
          <div>&nbsp;&nbsp;6.2</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="img-container">
          <img src="../../images/LIKE.png" alt="">
          <div>&nbsp;&nbsp;100</div>
        </div>
        <div class="text small">导演：邢文熊</div>
        <div class="text small">主演：马丽/魏翔/陈明昊</div>
        <div class="text small">类型：喜剧/华语/2022</div>
        
      </div>
    </div>
      <div class="loading-container" v-if='isShow'>
        <van-loading type="spinner" size="1.2rem" vertical /><div class="loading">加载中</div></van-loading>
      </div>
      <div v-if="isTextShow" style="margin-top:3.61rem;font-size: 0.26rem; text-align: center; color: #AAAAAA;">没有更多啦~</div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Loading } from 'vant';
import {getListInfo} from '@/api/List'


Vue.use(Loading);
export default {
  data() {
    return {
      isShow:true,
      isTextShow:false,
       list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

    };
  },

  components: {},
  mounted(){
    this.getRes()
    window.addEventListener("scroll", this.watchScroll1);
 },
  computed: {
    
  },
 
  methods: {
    getRes(){
      getListInfo().then(res=>{
        if(res.msg=='success'){
          this.isShow=false
        }else{
          this.isShow=true
        }
        let resMsg=res.msg
      })
    },
       watchScroll1() {
      var scrollTop1 = window.pageYOffset+window.screen.height-document.body.offsetHeight
      if (scrollTop1 >=0) {

        this.getRes()
        if (this.getRes.resMsg=="success") {
          this.isTextShow=true
        }else{
          this.isTextShow=false
        }
      }
    }
  }
}

</script>
<style lang='less' scoped>
div {
  font-family: "Adobe Heiti Std";
}
.movie-info-container {
  margin-top: 0.8rem;
  margin-left: 0.6rem;
  .movie-img {
    border-radius: 0.1rem;
    float: left;
    width: 1.96rem;
  }
  .small {
    font-family: Adobe Heiti Std;
    color: #AAAAAA;
    font-size: 0.24rem !important;
    margin-bottom: 0.19rem !important;
  }
  .movie-info-box {
    padding-left: 2.22rem;
    margin-bottom: 0.56rem;
    .text {
    font-weight: R;
    font-size: 0.32rem;
    margin-bottom: 0.08rem;
          }
    img {
      width: 0.21rem;
        }
    .title {
      margin-bottom: 0.25rem;
      }
    .img-container {
      display: inline-block;
       margin-bottom: 0.38rem;
      div {
        display: inline-block;
        vertical-align: baseline;
      }
      div {
        font-size: 0.24rem;
        color: #AAAAAA;
      }
    }
  }
}

.loading{
    text-align: center;
    font-size: 0.24rem;
    margin-top: 0.36rem;
    color:#AAAAAA;
}
.loading-container{
  margin-top: 1.55rem;
}

</style>